<template>
  <!-- 不能把keep-alive直接放在router-view中 -->
  <!-- 把keep-alive插入router-view，同时传入router-view得到的组件用于展示 -->
  <router-view v-slot="{ Component }"> 
    <transition name="fade" mode="out-in">
      <keep-alive :include="['Home','MessageList','MsgDetail','PublishPage']">
        <component :is="Component" />
      </keep-alive>
    </transition>
    
  </router-view> 
  
</template>

<script setup>

</script>

<style lang="scss">
.el-message--success .el-message__content{
  color:rgb(111,161,30) !important;
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.15s ease;
}

.fade-enter-from{
  transform: translateX(100%);
}

.fade-enter-to{
  transform: translateX(0);
}

.fade-leave-from{
  transform: translateX(0);
}

.fade-leave-to{
  transform: translateX(-100%);
}

/* xk：修改elementUI的loading效果为绿色,符合整体色调*/
.el-loading-spinner .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  /* stroke: var(--el-color-primary); 这是原本的颜色*/
  stroke-linecap: round;
  stroke: rgb(111,161,30) !important;
}
.el-loading-spinner .el-loading-text {
  /* color: var(--el-color-primary); 这是原本的颜色*/
  color: rgb(111,161,30) !important;
  margin: 3px 0;
  font-size: 20px;
}
</style>
